<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
</head>
<body>
    <div id="app">
        返回信息: {{ info.stu_name}}
        
        <div id="stu_tb">
            <table>
                <tr>
                    <td>学生名：{{info.stu_name}}</td>
                    <td>学号：{{info.stu_code}}</td>
                    <td>性别：{{info.stu_gender}}</td>
                    <td>电话：{{info.phone_num}}</td>
                </tr>
            </table>
        </div>
        
    </div>
    <script>
        var qs = Qs ;
        const App = {
            data() {
                    return {
                        info: {}
                    }
                },
            mounted () {
                axios
                .post('http://127.0.0.1:8080/student/find_stu_by_name',qs.stringify({
                    'stu_name': '张大三', // 参数 stuName
                }), {headers:{
                    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                }})
                .then(response => (this.info = response.data[0]))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            }
            
        }

        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>